import React, { useEffect, useState, useRef } from "react";
import { getQus } from "./service.js";
import { Radio, Space, Button, Checkbox, Input, Modal, Progress } from "antd";
import { connect } from "react-redux";
import "./index.css";
const { TextArea } = Input;

function Ques(props) {
  const [quesId, setQuesId] = useState(1);
  const [quesItem, setQuesItem] = useState(null);
  const [isVisible, setVisible] = useState(false);
  const [time, setTime] = useState(props.sysData.num);
  const [isFresh, setFresh] = useState(false);
  let isClick = useRef(false);
  const getCode = () => {
    let times = time;
    let timer = setInterval(() => {
      if (isClick.current) {
        return;
      }
      if (times < 1) {
        setTime(0);
        clearInterval(timer);
      } else {
        times -= 1;
        setTime(times);
      }
    }, 1000);
  };

  useEffect(() => {
    getQus(quesId).then((res) => {
      setQuesItem(res["list"].find((item) => item.id === quesId));
    });
  }, [quesId]);

  useEffect(() => {
    if (time === 0 && props.sysData.isAs) {
      setVisible(true);
    }
  }, [time]);
  return (
    <div className="work-ques">
      {quesItem && (
        <div
          onClick={() => {
            if (time === 0) {
              return;
            }
            if (time === props.sysData.num) {
              getCode();
            } else {
              isClick.current = !isClick.current;
              setFresh(!isFresh);
            }
          }}
          style={{
            position: "absolute",
            right: 30,
            top: 30,
            cursor: "pointer",
          }}
        >
          <Progress
            type="circle"
            width={60}
            percent={(time * 100) / props.sysData.num}
            strokeColor={"#1890ff"}
            format={(percent) =>
              ` ${
                time === props.sysData.num
                  ? "计时"
                  : isClick.current
                  ? "暂停"
                  : time
              }`
            }
          />
        </div>
      )}

      {quesItem && (
        <div
          className="ques-item"
          style={{ marginTop: "80px", maxWidth: "600px" }}
        >
          <div className="ques-title" style={{ fontSize: "20px" }}>
            题目：{quesItem.title}
          </div>
          <div
            className="ques-content"
            style={{
              display: "flex",
              justifyContent: "center",
              marginTop: "30px",
            }}
          >
            {quesItem.type === 1 && (
              <Radio.Group>
                <Space direction="vertical">
                  {quesItem.questionOptions.map((item) => (
                    <Radio value={item.value} key={item.id}>
                      {item.content}
                    </Radio>
                  ))}
                </Space>
              </Radio.Group>
            )}
            {quesItem.type === 2 && (
              <Checkbox.Group>
                <Space direction="vertical">
                  {quesItem.questionOptions.map((item) => (
                    <Checkbox value={item.value} key={item.id}>
                      {item.content}
                    </Checkbox>
                  ))}
                </Space>
              </Checkbox.Group>
            )}
            {quesItem.type === 3 && (
              <TextArea rows={4} placeholder="请把答案写在此处" />
            )}
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "150px",
              position: "absolute",
              width: "100%",
              padding: "0 100px",
              left: 0,
              bottom: 20,
            }}
          >
            <Button
              type="primary"
              style={{ width: 88 }}
              shape="round"
              onClick={() => {
                setQuesId(quesId + 1);
                setTime(props.sysData.num);
              }}
            >
              下一题
            </Button>
            <Button
              type="primary"
              shape="round"
              onClick={() => {
                setVisible(true);
              }}
            >
              查看答案
            </Button>
          </div>
        </div>
      )}
      {quesItem === undefined && (
        <div style={{ marginTop: "200px", fontSize: "30px" }}>答完啦！</div>
      )}
      {quesItem && (
        <Modal
          title="查看答案"
          visible={isVisible}
          footer={null}
          className="full-class-score"
          onCancel={() => {
            setVisible(false);
          }}
          style={{ minWidth: "40%", minHeight: "100px" }}
        >
          <div>
            正确答案：
            {quesItem.type === 1 && (
              <span style={{ color: "skyblue" }}>{quesItem.answer}</span>
            )}
            {quesItem.type === 2 &&
              quesItem.answer.map((item) => (
                <span style={{ color: "skyblue", marginLeft: "10px" }}>
                  {item}
                </span>
              ))}
            {quesItem.type === 3 && (
              <>
                {quesItem.title.slice(0, quesItem.title.indexOf("_"))}
                <span style={{ color: "skyblue" }}>{quesItem.answer}</span>
                {quesItem.title.slice(quesItem.title.lastIndexOf("_") + 1)}
              </>
            )}
          </div>
        </Modal>
      )}
    </div>
  );
}
const mapStateToProps = (state) => ({
  sysData: state.system,
});
export default connect(mapStateToProps, null)(Ques);
